import React from "react"

//父子组件通信
//父传子，使用props向子组件传递任何数据类型
//子传父，使用on自定义事件向父组件传递数据

const ChildA=props=>{
    let {onMsg}=props
    return(
        <div style={styles.aa}>
            <h5>我是child-a</h5>
            <input type="text" onKeyUp={onMsg}/>
        </div>
    )
}
const Childb=props=>{
    
    return(
        <div style={styles.bb}>
            <h5>我是child-b</h5>
            
            <h6>这是Childa传来的话:{props.msg}</h6>
        </div>
    )
}


export default class TestStateLift extends React.Component{
    constructor(props){
        super(props)
        this.state={
            msg:'hello child'
        }
    }
    updateMsg(e){
        if(e.keyCode==13){
            this.setState({
                msg:e.target.value
            })
        }
    }
    render(){
        let {
            msg
        }=this.state
        return(
            <div>
                <h1>状态提升</h1>
                <hr />
                <ChildA onMsg={_=>this.updateMsg(_)}></ChildA>
                <Childb msg={msg}></Childb>
            </div>
        )
    }
}

const styles={
    aa:{
        border:'1px solid red',
        padding:'20px'
    },
    bb:{
        border:'1px solid blue',
        padding:'20px'
    }
}